<template>
  <a-card :bordered="false" title="用户列表">
    <template #extra>
      <a-space size="middle">
        <a-button v-show="globalStore.state.loginUser.role === 9" type="primary" @click="$emit('showEditTable', {})">
          添加用户
        </a-button>
      </a-space>
    </template>
    <a-spin size="large" :spinning="spinning">
      <a-table
        class="ant-table-striped"
        :data-source="dataSource"
        :columns="columns"
        :row-key="recode => recode.userName"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'admin'">
            <a-tag v-if="record.role === 1" color="warning">管理员</a-tag>
            <a-tag v-else-if="record.role === 9" color="warning">超级管理员</a-tag>
            <a-tag v-else color="success">普通用户</a-tag>
          </template>

          <template v-if="column.dataIndex === 'password'">
            <span v-if="globalStore.state.loginUser.role !== 9">
              <span v-if="record.userName === globalStore.state.loginUser.userName">{{ record.password }}</span>
              <span v-else>******</span>
            </span>
            <span v-else>{{ record.password }}</span>
          </template>

          <template
            v-if="
              column.key === 'operation' &&
              (record.userName === globalStore.state.loginUser.userName || globalStore.state.loginUser.role === 9)
            "
          >
            <a-space size="small">
              <a-button type="primary" size="small" @click="$emit('showEditTable', record)">编辑</a-button>
              <a-popconfirm :title="'确定要删除【' + record.userName + '】吗？'" @confirm="deleteRecode(record)">
                <a-button type="primary" danger size="small">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-spin>
  </a-card>
</template>

<script setup lang="ts">
import type { User } from '@/api/user/user';
import * as userApi from '@/api/user/user';
import { message } from 'ant-design-vue';
import { globalStore } from '@/store';

defineEmits<{
  (e: 'showEditTable', editRecode: User): void;
}>();

const columns = [
  {
    title: '#',
    customRender: (text: any) => text.index + 1,
  },
  {
    title: '用户名',
    dataIndex: 'userName',
  },
  {
    title: '密码',
    dataIndex: 'password',
  },
  {
    title: '角色',
    dataIndex: 'admin',
  },
  {
    title: '分区键gcId',
    dataIndex: 'gcId',
  },
  {
    title: '更新时间',
    dataIndex: 'updateDateTime',
  },
  {
    title: '操作',
    key: 'operation',
  },
];

let dataSource = ref<User[]>([]);

onBeforeMount(() => {
  userList();
});

let spinning = ref(false);

function userList() {
  spinning.value = true;
  userApi.userList().then(jsonResult => {
    spinning.value = false;
    if (!jsonResult) {
      return;
    }
    dataSource.value = jsonResult.result;
  });
}

function deleteRecode(recode: object) {
  userApi.userDelete(recode).then(jsonResult => {
    if (!jsonResult) {
      return;
    }
    userList();
    message.success('删除成功');
  });
}
</script>

<style lang="less" scoped>
.paddingTop {
  margin-top: 30px;
}

.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
